<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-light.min.css" />
  <link rel="stylesheet" href="https://cdn.bootcss.com/github-markdown-css/2.8.0/github-markdown.min.css" />
  <title>marked in html</title>
</head>
<body>
  <template type="markdown">
    欢迎使用 Marked In HTML ！
    ====

    marked in html 使用 `marked` 作为`Markdown`转换器，使用`highlight.js`支持代码高亮功能

    ```js
    import marked from 'marked'
    import highlight from 'highlight.js'

    export class MarkedInHtml {

      constructor (){
        marked.setOptions(this.options || {
          gfm: true,
          tables: true,
          breaks: false,
          pedantic: false,
          sanitize: false,
          smartLists: true,
          smartypants: false ,
          highlight: function (code, lang, callback) {
            return highlight.highlightAuto(code).value
          }
        })
      }

      init (){
        document.querySelectorAll('template[type="markdown"]').forEach(($template) => {
          $template.parentElement.innerHTML = this.parse($template)
        })
      }

      parse ($template){
        return marked(this.intelligentProcessingIndent($template))
      }

      intelligentProcessingIndent ($template){
        let lines = $template.innerHTML.split('\n')
        lines.length && /^\s*$/.test(lines[0]) && lines.shift()
        lines.length && /^\s*$/.test(lines[lines.length-1]) && lines.pop()
        let minSpaceSize = Math.min(...lines.map(line => line.length ? line.match(/^\s*/)[0].length : Infinity))
        return lines.map(line => line.substring(minSpaceSize)).join('\n')
      }
    }
    ```
  </template>
</body>
<script src="https://cdn.bootcss.com/marked/0.3.6/marked.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/javascript.min.js" charset="utf-8"></script>
<script src="../dist/marked-in-html.min.js" charset="utf-8"></script>
<script type="text/javascript">
  markedInHtml.init()
</script>
</html>
